<script setup>
import request from '../utils/request'
import { sortNodesByKeys } from '../utils/index'


onMounted(async () => {
  await login()
  await getQuestion()
})
/** 登录 */
const login = async () => {
  // 获取路径上面的参数
  const editionCode = window.location.search.split('=')[1]
  console.log('%c [ editionCode ]-15', 'font-size:13px; background:pink; color:#bf2c9f;', editionCode)
  localStorage.removeItem('token')
  const data = {
    "phone": "13502520163",
    "code": "167441",
    "terminal": 0,
    "editionCode": editionCode || 'GD',
    "mac": "16-AC-60-F8-F2-E1"
  }
  const res = await request.post('/Authorization/LoginByCode', data)
  localStorage.setItem('token', res.token)
}

const questionList = ref([])
const radio = ref('')
const getQuestion = async () => {
  const res = await request.get('/MonitorDispatch/Practice/GetQuestionsConfig')
  const data = res.find(item => item.businessCode === 'MonitorDispatch_Monitor_CustomerAssistance')?.items
  questionList.value = data
}

const questionId = ref('')
const questionInfo = reactive({})
const chatPointInfos = ref([])
const getQuestionDetail = async () => {
  if(!questionId.value) return
  // 获取当前题目的详细信息
  const res = await request.get(`/CustomerAssistance/ServiceSceneConfig/GetInfo?id=${questionId.value}`)
  Object.assign(questionInfo, res)

  const verbalPoints = sortNodesByKeys(res.verbalPoints)
  // 获取当前题目的话术信息
  const data = verbalPoints.map(item => item.chatPointId)
  const res2 = await request.post('CustomerAssistance/VerbalPointConfig/GetChatPointInfos', data)
  chatPointInfos.value = data.map(item => {
    const info = res2.find(i => i.id === item)
    return {
      standardVerbal: info.standardVerbal,
      reply: info.reply
    }
  })
}


/** 创建验证 */
const createPractice = async () => {
  if (!radio.value) return
  const items = [
    {
      "questionsCount": 1,
      "categoryId": radio.value,
    }
  ]
  const data = {
    "ScoreConfigId": 0,
    "LimitMinutes": 0,
    "BusinessCode": "MonitorDispatch_Monitor_CustomerAssistance",
    "ShiJuanConfigId": 0,
    "QuestionsConfigItems": [
      {
        "items": items,
        "businessCode": "MonitorDispatch_Monitor_CustomerAssistance",
        "ownershipCode": "CustomerAssistance",
        "totalCount": 1
      }
    ]
  }
  const res = await request.post('/MonitorDispatch/Practice/CreatePractice', data)
  // 根据练习id拿到当前的题目
  getQuesitions(res)
}


const eventId = ref('')
const getQuesitions = async (shiJuanId) => {
  const res = await request.get(`/MonitorPractice/GetQuesitions?shiJuanId=${shiJuanId}`)
  const id = res.customerAssistanceItems[0].id
  eventId.value = id
  for (let i = 0; i < chatPointInfos.value.length; i++) {
    const info = chatPointInfos.value[i]
    await postAnalysisEventAnswer(info.standardVerbal)
  }
}

const verificationResults = ref([])
/** 发送考试话术获取机器人回复 */
const postAnalysisEventAnswer = async (text) => {
  const data = { "eventId": eventId.value, "businessCode": "customerassistance", "text": text }
  verificationResults.value.push('考生：' + text)
  const res = await request.post('/TextAnalysis/AnalysisEventAnswer', data)
  verificationResults.value.push('机器人：' + res[0].displayVerbal)
}



</script>

<template>
  <div class="p-[10px] flex">
    <div class="my-[20px] flex-1 mr-[10px]">
      <p class="font-bold">客户服务标准库/题目话术配置中的题目</p>
      <div class="w-[500px] my-[10px] flex justify-between items-center">
        <el-input v-model="questionId" placeholder="请输入当前题目的id"></el-input>
        <el-button type="primary" class="ml-[10px]" @click="getQuestionDetail">获取当前题目的话术</el-button>
      </div>
      <div>
        <p>题目名称：{{ questionInfo.question }}</p>
        <div>
          <div v-for="(item, index) in chatPointInfos" class="my-[10px]">
            <p class="leading-[24px]">考生：{{ item.standardVerbal }}</p>
            <p class="text-[#999] mt-[5px]">机器人：{{ item.reply }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="flex-1">
      <p class="font-bold">客户服务题目</p>
      <el-radio-group v-model="radio" class="p-[10px]">
        <el-radio v-for="item in questionList" class="w-[20%] text-[20px]" :value="item.categoryId"
          :key="item.categoryId">{{ item.name }}</el-radio>
      </el-radio-group>
      <div>
        <el-button type="primary" @click="createPractice">开始验证</el-button>
        <div>
          <div v-for="(item, index) in verificationResults" :key="index" class="my-[10px]">
            <p class=" mt-[5px]" :class="{ 'text-[#999]': item.includes('机器人') }">{{ item }}</p>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<style scoped></style>